import React, { Component } from 'react'
import Header from '../components/header'
import CourseListScroll from '../components/course/CourseListScroll'
import Footer from '../components/footer'
import LoginPage from '../components/login'
import { bindActionCreators } from 'redux'
import { ActionCreators } from '../actions'
import { connect } from 'react-redux'
import { withStyles } from 'material-ui/styles'
import _ from 'lodash'

import BottomNavigation, { BottomNavigationButton } from 'material-ui/BottomNavigation';
import RestoreIcon from 'material-ui-icons/Restore';
import FavoriteIcon from 'material-ui-icons/Favorite';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import Hidden from 'material-ui/Hidden'

const styles = theme => ({
	root: {
		display: 'flex',
		flexDirection: 'column',
		justifyContent: 'center',
		marginRight: 'auto',
		marginLeft: 'auto',
		width: '90%',
		alignItems: 'center',
	},
	header: {
		marginBottom: 90
	},
	navigation: {
		width: '100%',
		position: 'fixed',
		bottom: 0
	},
	naviButton: {
		color: 'black'
	},
	'@media (max-width: 600px)': {
		root: {
			width: '100%'
		},
		header: {
			marginBottom: 50
		}
	}
})

@withStyles(styles)
class CourseContainer extends Component {
	constructor(props) {
	  super(props)
	}

	backToHome() {
		location.hash =`/`
	}

	render() {
		const {classes, courses} = this.props
		return (
			<div className={classes.root}>
				<div className={classes.header}>
					<Header { ...this.props } showSearch={true} showLogoTitle={false} showLogo={false} showOperations={false} position='fixed'/>
        </div>
        <CourseListScroll { ...this.props } />
        <Footer />
        <Hidden smUp>
	        <BottomNavigation
		        value={0}
		        onChange={this.handleChange}
		        showLabels
		        className={classes.navigation}
		      >
		        <BottomNavigationButton label="返回首页" className={classes.naviButton} onClick={() => this.backToHome()}/>
		      </BottomNavigation>
		    </Hidden>
				<LoginPage {...this.props} />
			</div>
			)
	}
}

function mapDispatchToProps( dispatch ){
	return bindActionCreators( ActionCreators, dispatch)
}

function mapStateToProps( state ) {
	return {
		isAuthed: state.auth.isAuthed,
		searchKey: state.searchKey,
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(CourseContainer)